<div class="container clearfix">
    <!-- <div class="header" [@headerAnimations]="isOpen ? 'open' : 'closed'">
        <div nz-row class="header-box">
            <div nz-col nzXs="8" nzSm="6" nzMd="6" nzLg="6" nzXl="6" class="logo-left  animated fadeInLeft parent">
                <a routerLink="/home">
                    <img src="assets/TIDC-LOGO.png" alt="logo" class="logo">
                </a>
            </div>
            <div nz-col nzMd="0" nzLg="12" nzXl="17"></div>
            <div nz-col nzXs="16" nzSm="17" nzMd="16" nzLg="6" nzXl="1" class=" animated bounce">
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul nz-menu [nzMode]="navStyle">
                        <li nz-menu-item *ngFor="let item of list" class="title-style">
                            <a [routerLink]="item.url" style="text-decoration: none;font-size:18px">
                                <span [@fontColor]="isOpen ? 'open' : 'closed'">{{ item.title }}</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <button nz-button nzType="primary" (click)="open()" class="navbar-toggle">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <nz-drawer [nzClosable]="false" [nzVisible]="visible" [nzPlacement]="placement" (nzOnClose)="close()">
                    <div style="overflow-x: hidden">
                        <ul nz-menu [nzMode]="'inline'" nzTheme='light' [nzInlineCollapsed]="isCollapsed">
                            <ul>
                                <li nz-menu-item *ngFor="let item of list">
                                    <a [routerLink]="item.url" style="text-decoration: none" (click)="hideDrawer()">
                                        <i nz-icon [type]="item.icon"></i>
                                        <span style="font-size:16px">{{ item.title }}</span>
                                    </a>
                                </li>
                            </ul>
                        </ul>
                    </div>
                </nz-drawer>
            </div>
        </div>
    </div> -->

    <div class="header-box" [@headerAnimations]="isOpen ? 'open' : 'closed'" id="stick">
        <div class="header">
            <div>
                <a href="https://cx-tidc.com">
                    <img src="assets/TIDC-LOGO.png" alt="科创官网" class="logo">
                </a>
            </div>
            <div class="list-box">
                <ul class="list">
                    <!-- <li class="list-content" *ngFor="let item of list;let i = index;">
                        <a [routerLink]="item.url" [@fontColor]="isOpen ? 'open' : 'closed'"
                            style="text-decoration: none"  class="routingstyle" >
                            {{item.title}}
                        </a>
                    </li> -->
                    <li class="list-content">
                        <a routerLink="/home" [@fontColor]="isOpen ? 'open' : 'closed'" style="text-decoration: none" class="routingstyle">
                            首页
                        </a>
                    </li>
                    <li class="list-content">
                        <a routerLink="" [@fontColor]="isOpen ? 'open' : 'closed'" style="text-decoration: none" class="routingstyle" (click)="createMessage('warning')">
                            论坛
                        </a>
                    </li>
                    <li class="list-content">
                        <a routerLink="/updateresource" [@fontColor]="isOpen ? 'open' : 'closed'" style="text-decoration: none" class="routingstyle">
                            学习资料
                        </a>
                    </li>
                    <li class="list-content">
                        <a routerLink="/add-we" [@fontColor]="isOpen ? 'open' : 'closed'" style="text-decoration: none" class="routingstyle">
                            加入我们
                        </a>
                    </li>
                </ul>
            </div>

            <button nz-button nzType="primary" (click)="open()" class="navbar-toggle">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <nz-drawer [nzClosable]="false" [nzVisible]="visible" [nzPlacement]="placement" (nzOnClose)="close()" [nzWidth]="220" class="drawer">
                <div style="overflow-x: hidden">
                    <ul nz-menu [nzMode]="'inline'" nzTheme='light' [nzInlineCollapsed]="isCollapsed">
                        <ul>
                            <!-- <li nz-menu-item *ngFor="let item of list">
                                <a [routerLink]="item.url" style="text-decoration: none" (click)="hideDrawer()">
                                    <i nz-icon [type]="item.icon"></i>
                                    <span style="font-size:16px">{{ item.title }}</span>
                                </a>
                            </li> -->
                            <li nz-menu-item>
                                <a routerLink="/home" style="text-decoration: none" (click)="hideDrawer()">

                                    <i nz-icon type="home" class="frontSize"></i>
                                    <span class="frontSize marginLeft">首页</span>
                                </a>
                            </li>
                            <li nz-menu-item>
                                <a routerLink="" style="text-decoration: none" (click)="hideDrawer()" (click)="createMessage('warning')">

                                    <i nz-icon type="code" class="frontSize"></i>
                                    <span class="frontSize marginLeft">论坛</span>
                                </a>
                            </li>
                            <li nz-menu-item>
                                <a routerLink="/updateresource" style="text-decoration: none" (click)="hideDrawer()">

                                    <i nz-icon type="book"></i>
                                    <span class="frontSize marginLeft"> 学习资料</span>
                                </a>
                            </li>
                            <li nz-menu-item>
                                <a routerLink="/add-we" style="text-decoration: none" (click)="hideDrawer()">

                                    <i nz-icon type="team" class="frontSize"></i>
                                    <span class="frontSize marginLeft"> 加入我们</span>
                                </a>
                            </li>
                        </ul>
                    </ul>
                </div>
            </nz-drawer>
        </div>
    </div>
</div>
<div class="header-background" [@openClose]="isOpen ? 'open' : 'closed'" id="header-background"></div>